<template>
    <el-container>
      <el-header style="background-color: white;">
        <div class="flex1">
          <div>
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
              <el-tab-pane label="全部" name="first"></el-tab-pane>
              <el-tab-pane label="待处理" name="second"></el-tab-pane>
              <el-tab-pane label="已处理" name="third"></el-tab-pane>
            </el-tabs>
          </div>
          <div>
            <el-button type="primary" @click="add">添加<i class="el-icon-upload el-icon--right"></i></el-button>
  
          </div>
        </div>
        <div gutter="12">
  
        </div>
      </el-header>
      <el-main style="height:750px; padding: 0px 20px;background-color: white;">
  
        <div class="flex1">
          <div class="flex2">
            <div>
              <span style="margin-right: 5px;">事件类别</span>
              <el-select clearable v-model="selectedValue1" filterable placeholder="请选择">
                <el-option v-for="v in selectedData1" :key="v.id" :label="v.link" :value="v.link">
                </el-option>
              </el-select>
  
            </div>
            <div>
              <span style="margin-right: 5px;">优先级</span>
              <el-select clearable v-model="selectedValue2" filterable placeholder="请选择">
                <el-option v-for="v in selectedData2" :key="v.id" :label="v.pri" :value="v.pri">
                </el-option>
              </el-select>
            </div>
            <div>
              <span style="margin-right: 5px;">工单状态</span>
              <el-select clearable v-model="selectedValue3" filterable placeholder="请选择">
                <el-option v-for="v in selectedData3" :key="v.id" :label="v.state" :value="v.state">
                </el-option>
              </el-select>
            </div>
          </div>
          <div>
            <el-input clearable v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </div>
  
  
        <el-table :data="data.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%"
          :show-header="false">
          <el-table-column prop="name" label="日期">
            <template slot-scope="scope">
              <div style="cursor: pointer;">编码：{{ scope.row.code }}</div>
              <div style="cursor: pointer;">摘要：{{ scope.row.abstract }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="姓名">
            <template slot-scope="scope">
              <div style="cursor: pointer;">工单状态：{{ scope.row.state }}</div>
              <div style="cursor: pointer;">时间：{{ scope.row.data }}</div>
            </template>
          </el-table-column>
  
          <el-table-column prop="link" label="当前环节">
            <template slot-scope="scope">
              <div style="cursor: pointer;">当前环节：{{ scope.row.link }}</div>
              <div style="cursor: pointer;">处理人：{{ scope.row.user }}</div>
            </template>
          </el-table-column>
  
          <el-table-column prop="pri" label="优先级">
            <template slot-scope="scope">
              <div style="cursor: pointer;">优先级：{{ scope.row.pri }}</div>
              <div style="cursor: pointer;">类别：{{ scope.row.type }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="edit(scope)"  size="small" type="text"  width="30">修改</el-button>
              <el-button @click="delet(scope)"  size="small" type="text"  >删除</el-button>
              <el-button @click="handle(scope)"  size="small" type="text" v-if="scope.row.state == '未提交'" >处理</el-button>
            </template>
          </el-table-column>
        </el-table>
  
  
      </el-main>
      <el-footer style="background-color: white;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[8, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="data.length">
        </el-pagination>
      </el-footer>
    </el-container>
  </template>
  <script>
  
  
  export default {
    components: {
  
  
    },
  
    data() {
      return {
        input: '',
        selectedValue1: '',
        selectedValue2: '',
        selectedValue3: '',
        activeName: '',
        activestate: 'first',
        total: 0,
        currentPage: 1,
        pageSize: 8,
  
        data: [
        ],
        selectedData1: [
          {
            id: 1,
            link: '用户编辑故障'
          },
          {
            id: 2,
            link: '系统编辑故障'
          }
        ],
        selectedData2: [
          { id: 1, pri: '★' },
          { id: 2, pri: '★★' },
          { id: 3, pri: '★★★' },
          { id: 4, pri: '★★★★' },
          { id: 5, pri: '★★★★★' },
        ],
        selectedData3: [
        
          { id: 1, state: "未提交" },
          { id: 2, state: "已升级二线" },
          { id: 3, state: "已升级三线" },
          { id: 4, state: "已升级重大故障" },
          { id: 5, state: "已初步评估" },
          { id: 6, state: "已诊断分析" },
          { id: 7, state: "已关闭" },
        ]
  
  
  
  
  
      };
    },
  
    methods: {
      none() {
        this.activestate = 'second'
  
      },
      done() {
        this.activestate = 'third'
  
      },
      all() {
        this.activestate = 'first'
  
      },
      add() {
        this.$router.push('/home/repair/Addproblem');
      },
      handle(scope) {
  
        this.$store.commit('setA', scope.row.id);
        window.sessionStorage.setItem('id',this.$store.state.a)
        this.$router.push('/home/repair/Handleproblem');
      },
      geteditid() {
  
      },
      handleSizeChange(v) {
  
        this.currentPage = 1;
        this.pageSize = v;
      },
      handleCurrentChange(v) {
  
        this.currentPage = v;
      },
      handleTabClick(tab) {
        if (tab.name === 'first') {
          this.all();
        } else if (tab.name === 'second') {
          this.none();
        } else if (tab.name === 'third') {
          this.done();
        }
        this.selectedValue1= '';
        this.selectedValue2= '';
        this.selectedValue3= '';
        this.currentPage=1
        this.get()
      },
      get() {
        let json = {};
        if (this.activestate === 'second') {
          json.state = '未提交'
          this.selectedData3= [
          { id: 2, state: "未提交" }
        ]
        }
        else if (this.activestate === 'third') {
          json.state = [
            "已提交",
            "已升级二线",
            "已升级三线",
            "已升级重大故障",
            "已初步评估",
            "已诊断分析",
            "已关闭"],
            this.selectedData3= [
        
          { id: 1, state: "已升级二线" },
          { id: 2, state: "已升级三线" },
          { id: 3, state: "已升级重大故障" },
          { id: 4, state: "已初步评估" },
          { id: 5, state: "已诊断分析" },
          { id: 6, state: "已关闭" },
        ]
            
        }
        else{
          this.selectedData3= [
         
          { id: 1, state: "未提交" },
          { id: 2, state: "已升级二线" },
          { id: 3, state: "已升级三线" },
          { id: 4, state: "已升级重大故障" },
          { id: 5, state: "已初步评估" },
          { id: 6, state: "已诊断分析" },
          { id: 7, state: "已关闭" },
        ]
        }
        this.selectedValue1 && (json.type = this.selectedValue1);
        this.selectedValue2 && (json.pri = this.selectedValue2)
        this.selectedValue3 && (json.state = this.selectedValue3)
        this.input && (json.code = this.input)
        this.$axios({
          url: '/test',
          method: 'get',
          params: json
  
        }).then((res) => {
          if (res) {
            this.data = [...res.data]
            
            /* for (let i = 0; i < res.data.length; i++) {
              this.data.push(res.data[i]);
              console.log(res.data[i]);
            } 为什么这种方法不行见readme*/
          }
  
        })
      },
      over(scope) {
        this.$axios.patch(`/test/${scope.row.id}`, {
  
          state: '已修改'
        }).then(() => {
          this.get();
        })
  
  
        this.get()
      },
      delet(scope) {
        this.$axios.delete(`/test/${scope.row.id}`, {
  
        }).then((res) => {
          if (res) {
            alert('删除成功')
            this.currentPage = 1;
  
            this.get()
          }
        })
      },
      edit(scope) {
        this.$store.commit('setA', scope.row.id);
        this.$router.push('/home/repair/Addproblem');
      }
  
  
  
  
    },
    mounted() {
      this.get()
    },
    watch: {
  
      selectedValue1: function () {
        this.get()
        //console.log(this.selectedValue1)
      },
      selectedValue2: function () {
        this.get()
        //console.log(this.selectedValue2)
      },
      selectedValue3: function () {
        this.get()
        //console.log(this.selectedValue3)
      },
      input: function () {
        this.get()
      }
    }
  
  };
  </script>
  
  <style scoped>
  .el-tabs__nav-wrap::after {
    width: auto;
  }
  
  .flex1 {
    display: flex;
  
    justify-content: space-between;
  
  }
  
  .flex2 {
    display: flex;
    justify-content: left;
  
  }
  
  .settingbutton {
    padding: 0px 0px;
    border: 0px solid;
    margin-left: 5px;
  }
  
  ::v-deep .el-table tr {
    background-color: #FFF;
    height: 85px;
  }
  
  ::v-deep .el-pagination {
    padding: 0px 5px;
  }
  
  ::v-deep .el-select {
    margin-right: 10px;
  }
  </style>